<template>
  <div>child BBBBB</div>
  <p>{{ count }}</p>
  <button @click="update">按钮</button>
  <p>{{ state.person.name }}</p>
  <p>{{ money }}</p>
  <C />
</template>

<script setup>
import {
  ref,
  reactive,
  computed,
  watch,
  onMounted,
  onBeforeMount,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  defineProps, // 声明props
  defineEmits, // 声明事件
} from "vue";
// 组件引入即可使用
import C from "./C.vue";

onMounted(() => {
  console.log("onMounted");
});
onUpdated(() => {
  console.log("onUpdated");
});

console.log("setup");
// 定义响应式数据
// 定义单个
const count = ref(0);
// 定义多个
const state = reactive({
  num: 0,
  person: {
    name: "jack",
  },
});

// 定义方法
const update = () => {
  count.value++;
};

const money = computed(() => {
  return "￥" + count.value;
});
// const money = computed({
//   get() {},
//   set() {}
// })

watch(
  count,
  (newVal, oldVal) => {
    console.log("watch触发了");
  },
  {
    immediate: true,
    // deep: true
  }
);
</script>

<style></style>
